<template>
  <div class="container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-input
          placeholder="请输入内容"
          v-model="search"
          class="input-with-select"
          style="width: 400px"
        >
          <el-button slot="append" icon="el-icon-search" @click="toSearch"></el-button>
        </el-input>
        <!-- <el-button type="primary" size="small" style="float: right"
          >新增</el-button
        > -->
      </div>
      <div class="text item">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column label="姓名" width="120px" prop="name">
          </el-table-column>
          <el-table-column label="角色" width="160px">
            <template slot-scope="scope">
              <el-tag size="medium">{{ scope.row.role }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="手机号" width="" prop="mobile">
          </el-table-column>
          <el-table-column label="性别" width="100px" prop="sex">
          </el-table-column>
          <!-- <el-table-column label="创建时间" width="" prop="createdAt">
          </el-table-column> -->
          <el-table-column label="最后更新时间" width="" prop="updatedAt">
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row)"
                >编辑</el-button
              >
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[10, 20, 50]"
          :page-size="10"
          :current-page.sync="currentPage"
          style="float: right; margin: 20px 0"
          background
          layout="sizes, prev, pager, next"
          :total="10"
        >
        </el-pagination>
        <el-dialog
          title="修改信息"
          :visible.sync="dialogFormVisible"
          :append-to-body="true"
        >
          <el-form :model="userForm">
            <el-form-item label="头像" :label-width="formLabelWidth">
              <el-image
                style="width: 100px; height: 100px"
                :src="userForm.avatarUrl"
                fit="cover"
              ></el-image>
              <!-- <el-input v-model="userForm.avatarUrl" autocomplete="off"></el-input> -->
              <el-upload
                ref="upload"
                accept="image/jpeg,image/gif,image/png"
                action="#"
                :auto-upload="false"
                class="upload-demo"
                :limit="1"
                list-type="picture-card"
                :on-change="onChange"
                :on-exceed="handleExceed"
              >
                <img v-if="imageUrl" :src="imageUrl" class="avatar" alt />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
            <el-form-item label="姓名" :label-width="formLabelWidth">
              <el-input v-model="userForm.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="权限" :label-width="formLabelWidth">
              <el-select v-model="userForm.role" placeholder="请选择">
                <el-option label="管理员" value="admin"></el-option>
                <el-option label="学生" value="student"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="性别" :label-width="formLabelWidth">
              <el-select v-model="userForm.sex" placeholder="请选择">
                <el-option label="男" value="男"></el-option>
                <el-option label="女" value="女"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="手机号" :label-width="formLabelWidth">
              <el-input
                v-model="userForm.mobile"
                :disabled="true"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="密码" :label-width="formLabelWidth">
              <el-input v-model="userForm.code" autocomplete="off"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="updateInfo">确 定</el-button>
          </div>
        </el-dialog>
      </div>
    </el-card>
  </div>
</template>

<script>
import { getUsermohu, getUser, getUserPaging, update, deleteUser } from '@/api/user'
export default {
  name: '',
  components: {},
  props: {},
  data () {
    return {
      search: '',
      currentPage: 1,
      pageSize: 10,
      total: 100,
      tableData: [],
      dialogFormVisible: false,
      userForm: {
        name: '',
        code: '',
        mobile: '',
        role: '',
        sex: '',
        avatarUrl: ''
      },
      formLabelWidth: '120px',
      imageUrl: ''
    }
  },
  computed: {},
  watch: {},
  created () {},
  mounted () {
    this.getAllInfo()
  },
  methods: {
    handleEdit (index, row) {
      console.log(index, row)
      this.userForm = row
      // console.log(new Date(row.createdAt))
      this.dialogFormVisible = true
    },
    handleDelete (index, row) {
      console.log(index, row)

      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          const res = await deleteUser(row)
          console.log(res)
          if (res.data.errno === 1000) {
            this.getAllInfo()
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
          } else {
            this.$message({
              type: 'warning',
              message: '删除失败!'
            })
          }
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    async updateInfo () {
      const res = await update(this.userForm)
      console.log('update res', res)
      if (res.data.errno === 1000) {
        this.$message({
          message: '修改成功',
          type: 'success'
        })
      } else {
        this.$message({
          message: '修改失败',
          type: 'warning'
        })
      }
      this.dialogFormVisible = false
    },
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
    },
    async getAllInfo () {
      const res = await getUserPaging({
        currentPage: 1,
        pageSize: 10
      })
      // console.log('res', res)
      this.tableData = res.data.data
    },
    onChange (file) {
      // 把图片转成base64编码
      const a = new FileReader()
      a.readAsDataURL(file.raw)
      a.onload = (e) => {
        const base64 = e.target.result
        console.log(base64) // base64数据
        this.userForm.avatarUrl = base64
      }
    },
    handleExceed (files, fileList) {
      this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
    },
    async toSearch () {
      if (this.search) {
        const res = await getUsermohu({
          name: this.search
        })
        this.tableData = res.data.data
      } else {
        const res = await getUser()
        this.tableData = res.data.data
      }
    }
  }
}
</script>

<style scoped lang="scss">
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  text-align: center;
}
</style>
